import React, { useState, useEffect } from "react";
import { DatePicker, Form } from "antd";
import moment from "moment";
import { Input, Select, BatchSuffixInput } from "@/views/components/PrefixPlaceholder";
import { NumText, StatusText } from "@/pages/OrderModule/common/components/CommonText";
import TakeGoodsSelect from "@/views/components/TakeGoodsSelect";
import { PURCHASE_STATUS } from "@/views/utils/constant";
import CommonStoreSearchInput from "@/views/components/CommonStoreSearchInput/index";
const { RangePicker } = DatePicker;
const dateFormat = "YYYY-MM-DD HH:mm:ss";
export default ({ handleDetailVisible, takeGoods, handleTakeGoodsChange }) => {
	const defaultColumns = [
		{
			name: "序号",
			code: "index",
			lock: true,
			render: (t, r, i) => i + 1,
			width: 60
		},
		{
			name: "采购单号",
			code: "purchaseOrderNo",
			search: {
				order: 2,
				code: "purchaseOrderNos",
				content: () => (
					<BatchSuffixInput
						clearable
						allowClear
						autoMultiLine
						maxItem={500}
						modalProps={{
							title: "批量输入"
						}}
						placeholder="多个采购单号，以逗号隔开"
						message="分行输入内容，提交后主页面输入框会按照逗号自动隔开，点击查询可批量查询。"
						areaPlaceholder="每行输入1个内容，最多500个，例如:&#10;1272572508553111112223&#10;1272572512332111112226"
					/>
				)
			},
			width: 150,
			render: (text, record) => (
				<span className="common-color2" onClick={() => handleDetailVisible(record)}>
					{text}
				</span>
			)
		},
		{
			name: "创建时间",
			code: "createTime",
			render: text => (text ? <div>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</div> : ""),
			search: {
				order: 3,
				span: 6,
				group: [
					{
						span: 6,
						code: "dateType",
						content: () => (
							<Select
								className="width-full"
								defaultValue={1}
								origin={origin}
								placeholder="选择日期"
								options={[
									{
										value: 0,
										label: "创建时间"
									},
									{
										value: 1,
										label: "审核时间"
									},
									{
										value: 2,
										label: "完成时间"
									}
								]}
							/>
						)
					},
					{
						span: 18,
						keys: ["createTimeStart", "createTimeEnd"],
						code: "times",
						content: () => <RangePicker format={dateFormat} showTime placeholder={["开始时间", "结束时间"]} />
					}
				]
			},
			width: 200
		},
		{
			name: "供应商",
			code: "supplierName",
			search: {
				order: 4,
				content: () => <CommonStoreSearchInput type="storeName" valueKey="storeName" placeholder="供应商名称" />
			},
			width: 200
		},
		{
			name: "采购单状态",
			code: "status",
			render: value => (
				<span>
					{PURCHASE_STATUS.map(item => {
						if (item.value == value) {
							return (
								<NumText
									as="s1"
									type={
										item.value == "complete"
											? "success"
											: item.value == "wait-pickup" || item.value == "wait-audit" || item.value == "partial-pickup"
												? "warning"
												: "error"
									}
									num={item.label}
								/>
							);
						}
					})}
				</span>
			),
			width: 100,
			search: {
				order: 1,
				content: () => (
					<Select
						allowClear
						showSearch={false}
						maxTagCount={1}
						mode="multiple"
						placeholder="采购单状态"
						options={PURCHASE_STATUS}
					/>
				)
			}
		},
		{
			name: "拿货员",
			code: "pickerName",
			search: {
				code: "pickerId",
				order: 6,
				content: () => {
					return <TakeGoodsSelect value={takeGoods} params={{ businessType: 3 }} onChange={handleTakeGoodsChange} />;
				}
			},
			width: 150
		},
		{
			name: "采购总数量",
			code: "totalNum",
			width: 100,
			search: {
				code: "skuName",
				order: 7,
				content: () => <Input allowClear placeholder="商品名称" />
			}
		},
		{
			name: "拿货数",
			code: "receivedNum",
			width: 100
			// search: {
			// 	order: 5,
			// 	code: "print",
			// 	content: () => <Select placeholder="请选择入库仓库" defaultValue={0} options={INCOMING_WAREHOUSE} />
			// }
		},
		{
			name: "采购金额",
			code: "purchasePrice",
			width: 100,
			render: value => <NumText as="s1" type="error" pre={value ? "¥" : ""} num={value ? value.toFixed(2) : 0} />,
			search: {
				code: "skuAbbreviation",
				order: 9,
				content: () => <Input allowClear placeholder="商品简称" />
			}
		},
		{
			name: "审核时间",
			code: "auditTime",
			width: 200,
			render: text => (text ? <div>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</div> : ""),
			search: {
				code: "spuCode",
				order: 11,
				content: () => <Input allowClear placeholder="款式编码" />
			}
		},
		{
			name: "完成时间",
			code: "completionTime",
			width: 200,
			render: text => (text ? <div>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</div> : ""),
			search: {
				code: "skuSpec",
				order: 12,
				content: () => <Input allowClear placeholder="颜色规格" />
			}
		},
		{
			name: "创建人",
			code: "createUserName",
			search: {
				code: "skuCode",
				order: 10,
				content: () => <Input allowClear placeholder="商品编码" />
			},
			width: 100
		}
	];
	return { defaultColumns };
};
